﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demo">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Resource/JS/angular.1.2.0.min.js"></script>
</head>
<body>
    <div ng-controller="CheckboxCtrl">
        <label for="chkAll">全选:</label><input id="chkAll" type="checkbox" ng-model="chkall" ng-click="chkAll(chkall)" />
        <div ng-repeat="item in chkArr">
            <input type="checkbox" ng-model="item.checked" />{{item.text}}
        </div>
        <div>你选中的是:{{choseArr}}</div>
    </div>

    <div ng-controller="SelectCtrl">
        <select ng-model="selectMod" ng-options="o.id as o.text for o in select1" ng-change="selChange(selectMod)">
            <option value="">-- 请选择 --</option>
        </select>
        <select ng-model="selectMod2" ng-options="o.id as o.text for o in select2">
            <option value="">-- 请选择 --</option>
        </select>
    </div>

    <div name="test_form" ng-controller="TestCtrl">
        <input type="checkbox" name="a" ng-model="a" ng-true-value="AA" ng-false-value="BB" />
        <span>{{ a }}</span>
    </div>
</body>
</html>
<script>
    var TestCtrl = function ($scope) {
        $scope.a = 'AA';
    }

    var demo = angular.module('demo', []);
    demo.controller('CheckboxCtrl', function ($scope, $filter) {
        $scope.chkall = false;
        $scope.chkArr = [
            { id: 1, text: "足球", checked: false },
            { id: 2, text: "蓝球", checked: false },
            { id: 3, text: "乒乓球", checked: false },
            { id: 4, text: "网球", checked: false }
        ];
        $scope.chkAll = function (checked) {
            angular.forEach($scope.chkArr, function (value, key) {
                value.checked = !checked;
            });
        };
        $scope.$watch('chkArr', function (nv, ov) {
            if (nv == ov) {
                return;
            }
            $scope.choseArr = [];
            angular.forEach(
              $filter('filter')(nv, { checked: true }), function (v) {
                  $scope.choseArr.push(v.text);
              });
            $scope.chkall = $scope.choseArr.length == $scope.chkArr.length;
        }, true);
    });

    demo.controller('SelectCtrl', function ($scope, $filter) {
        $scope.select1 = [
            { id: 1, text: "不同的数据" },
            { id: 2, text: "今天是周一" }
        ];
        $scope.selChange = function (id) {
            if (id == 1) {
                $scope.select2 = [
            { id: 1, text: "id为1的数据1" },
            { id: 2, text: "id为1的数据2" }
                ];
            }
            if (id == 2) {
                $scope.select2 = [
        { id: 3, text: "id为2的数据1" },
        { id: 4, text: "id为2的数据2" }
                ];
            }

        }
    });
</script>
